import React, { Component } from 'react'
import "./policies.scss"
import { Carousel } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer';
import { getApiBanner , getApiNotice , getApiNoticeTypeList , getApiNoticeInfo } from "../../axios/api"
import { Pagination } from 'antd';
import { UrlSearch , get } from '../../axios/localstorage';

export default class policies extends Component {

    state = {
        currentIndex:0,
        banner:[],
        page:1,
        total:1,
        list:[],
        show:0,
        title:'',
        type:'',
        typeList:[],
        data:{},
    }


    componentWillMount(){
        window.scroll(0,0);

        let id = UrlSearch('id');

        getApiBanner()
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiNoticeTypeList({type:0})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    typeList:data,
                    type:data[0].id
                })

                setTimeout(()=>{
                    if(id){
                        this.getInfo(id);
                    }else{
                        this.getData(1);
                    }
                },50)
            }
        }).catch(err =>{
            console.error(err);
        })

        
    }

    componentDidMount(){
        
    }

    gotoSlide=(num)=>{
        this.refs['bslide'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.getData(page);
    }

    getData=(page)=>{
        console.log(page);
        let param = {
            page,
            type_id:this.state.type
        }

        getApiNotice(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.list,
                    total:data.total
                })
            }else{
                this.setState({
                    list:[],
                    total:0,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoNext=(id)=>{
        if(id){
            this.getInfo(id);
        }
    }

    getInfo=(id)=>{
        let param = {
            id,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        }
        
        getApiNoticeInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data.info;
                this.setState({
                    show:1,
                    title:data.title,
                    data
                })

                this.gotoPage('/policies?id='+id)
            }   
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    render() {
        return (
            <div className="policies">
                <Header />
                <div className="h_banner">
                    <Carousel ref="bslide" dots={false} draggable={true} afterChange={(index)=>{this.onChange(index)}} autoplay={true} autoplaySpeed={3000}>
                        {
                            this.state.banner.map((item,index)=>{
                                return <div className='item' key={index} onClick={()=>{this.gotoUrl(item)}}>
                                            <div className="bg" style={{background:"url('"+item.image_text+"') no-repeat center center"}}></div>
                                        </div>
                            })
                        }
                    </Carousel>
                    <div className="slides">
                        {
                            this.state.banner.map((item,index)=>{
                                return <div onClick={()=>{this.gotoSlide(index)}} key={index} className={this.state.currentIndex === index?'hover':''}></div>
                            })
                        }
                    </div>
                </div>
                <div className="main">
                    <div className="cen">
                        <div className="box">
                            <div className="thead">
                                <p>当前位置：</p>
                                <p className="p_point" onClick={()=>{this.gotoPage('/')}}>首页</p>
                                <img alt="" src="assets/imgs/xiaji.png" />
                                <p className={this.state.show?"p_point":""} onClick={()=>{this.setState({show:0});this.gotoPage('/policies')}}>政策法规</p>
                                <img hidden={!this.state.show} alt="" src="assets/imgs/xiaji.png" />
                                <p hidden={!this.state.show}>{this.state.title}</p>
                            </div>
                            <div className="mbox">
                                <div className="mleft">
                                    <div className="m1">
                                        <img alt="" src="assets/imgs/zhengcefagui.png" />
                                        <p>政策法规</p>
                                    </div>
                                    {
                                        this.state.typeList.map((item,index)=>{
                                            return <div key={index} className={this.state.type === item.id?"m2 m_active":"m2"} onClick={()=>{
                                                this.setState({type:item.id,show:0});
                                                setTimeout(()=>{this.getData(1)},50);
                                                this.gotoPage('/policies');
                                                }}>
                                                        <img className="mi1" alt="" src="assets/imgs/erji2.png" />
                                                        <img className="mi2" alt="" src="assets/imgs/erji.png" />
                                                        <p>{item.title}</p>
                                                    </div>
                                        })
                                    }
                                </div>
                                <div className="mright" hidden={this.state.show}>
                                    <div className="list">
                                        {
                                            this.state.list.map((item,index)=>{
                                                return <div className="item" key={index} onClick={()=>{this.getInfo(item.id)}}>
                                                            <div className="iname">
                                                                <h2>{item.title}</h2>
                                                                <p>{item.create_time_text}</p>
                                                            </div>
                                                            <div className="idiv">
                                                                {item.content}
                                                            </div>
                                                        </div>
                                            })
                                        }
                                    </div>
                                    <div className='r_page'>
                                        <Pagination showSizeChanger={false} pageSize={10}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                                    </div>
                                </div>
                                <div className="mright" hidden={!this.state.show}>
                                    <div className="info">
                                        <div className="itop">
                                            <h1>{this.state.data.title}</h1>
                                            <div className="time">
                                                <h2>发布时间：{this.state.data.create_time_text}</h2>
                                                <p>浏览次数：{this.state.data.num}</p>
                                            </div>
                                            <a hidden={!this.state.data.file_text} target="_blank" without rel="noreferrer" className="down" href={this.state.data.file_text} name="111" download="附件">
                                                <img alt="" src="assets/imgs/xiazai.png"/>
                                                <p>附件下载</p>
                                            </a>
                                        </div>
                                        <div className="cont" dangerouslySetInnerHTML={{
                                            __html: this.state.data.content
                                        }}></div>
                                        <div className="next">
                                            <h2 onClick={()=>{this.gotoNext(this.state.data.up.id)}} className={this.state.data.up?"nh":""}>上一篇：{this.state.data.up?this.state.data.up.title:"没有了"}</h2>
                                            <h2 onClick={()=>{this.gotoNext(this.state.data.down.id)}} className={this.state.data.down?"nh":""}>下一篇：{this.state.data.down?this.state.data.down.title:"没有了"}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
